<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>武汉</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>
    <style>
        * {
            margin: 0;
        }

        .parallax-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 130%;
            height: 100%;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center;
        }

        .swiper-slide {
            width: 100% !important;
            font-size: 16px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 30px 20px;
        }

        .swiper {
            width: 100vw;
            max-height: 100vh;
            background: #eee;
            overflow-y: scroll;
            --swiper-theme-color: #ff6600;
            /* 设置Swiper风格 */
            --swiper-navigation-color: #00ff33;
            /* 单独设置按钮颜色 */
            --swiper-navigation-size: 30px;
            /* 设置按钮大小 */
            --swiper-theme-color: #ff6600;
            --swiper-pagination-color: #00ff33;
            /* 两种都可以 */
        }

        .img-wrap {
            padding: 20px 0;
        }

        .img-wrap img {
            width: 100%;
        }

        .swiper-pagination {
            position: fixed !important;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div style="background: #eee" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"
            class="parallax-bg"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div>
                    <H3>景点: 辛亥革命博物馆</H3>
                </div>
                <div>历史背景: 辛亥革命博物馆，是武汉市为纪念辛亥革命·武昌首义100周年而兴建的一座专题博物馆
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 每周二至周日9:00—17:00</div>
                <div>可玩度: ⭐⭐⭐ </div>
                <div>评价: 黄鹤楼旁边有时间就去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/e6fc4b329e6640588dba92969b0a78f9.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/d1160924ab18972bd4078277f6846c899e510fb39c7f?x-bce-process=image/resize,m_lfit,w_1280,limit_1"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 湖北省军政府（红楼）</H3>
                </div>
                <div>历史背景:2012年10月2日，辛亥革命武昌起义纪念馆成为国家AAAA级旅游景区 [3] ；2017年5月，晋级第三批“国家一级博物馆”
                    它原本是湖北省谘议局，后来因为武昌起义而成为了推翻帝制、民主共和的象征。因为建筑整体色调为红色，故老武汉人亲切地称其为“红楼”，主要看点在建筑风格和内部的展览陈列，预计游览时间40分钟左右。
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 周二至周日，每天9：00——17：00(16：00停止入)</div>
                <div>可玩度: ⭐⭐⭐</div>
                <div>评价: 黄鹤楼旁边有时间就去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/a35ae57170774becaa5ed757bf98ee25.png#pic_center" alt="">
                    <img src="https://picx.zhimg.com/80/v2-3a3bba29e02a2976ea59bd70f0f5cb34_720w.webp?source=1940ef5c"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 黄阁楼</H3>
                </div>
                <div>
                    历史背景:
                    “武汉三大名胜”之一，黄鹤楼，位于湖北省武汉市武昌区，地处蛇山之巅，濒临万里长江，为武汉市地标建筑；始建于三国吴黄武二年（223年），历代屡加重修，现存建筑以清代“同治楼”为原型设计，重建于1985年；因唐代诗人崔颢登楼所题《黄鹤楼》一诗而名扬四海。自古有“天下绝景”之美誉，与晴川阁、古琴台并称为“武汉三大名胜”，与湖南岳阳岳阳楼、江西南昌滕王阁并称为“江南三大名楼”，是“武汉十大景”之首、“中国古代四大名楼”之一、“中国十大历史文化名楼”之一，世称"天下江山第一楼"。
                </div>
                <div>费用: 65 / 人 （TUDU: 重要需提前购买， 美团好像有10元券， 分场次， 上午8点半到12点， 下午12点到5点）</div>
                <div>开放时间: 黄鹤楼公园每日开放时间为8:30—17:00；
                    室内场馆每日开放时间为：主楼8:30—17:30；白云阁、奇石馆、南楼8:30—17:00；落梅轩10:00—16：30（演出时间：第一场10:30—10:50；第二场12:00—12:20；第三场14:00—14:20；第四场16:00—16:20
                </div>
                <div>可玩度: ⭐⭐⭐⭐⭐</div>
                <div>评价: 必去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/d2665a33b8d84ed6ae1e74d8c642fc02.png#pic_center" alt="">
                    <img src="https://img-blog.csdnimg.cn/77437c27fe8743b0a4486d8846358397.png#pic_center" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 户部巷美食街</H3>
                </div>
                <div>
                    历史背景:明代形成，已有四百多年历史，作为武昌城内的一条百年老巷，户部巷这条久负盛名的美食街，不仅见证了老武昌城发展的风风雨雨，更将传统老字号与汉味小吃汇聚一堂，成为汉味小吃名扬全国的名片之一。蔡林记热干面、四季美汤包、老谦记牛肉枯豆丝、徐嫂糊汤粉……在武汉不用跨越武汉三镇，就能尝尽地道汉味美食的地方，只有户部巷。
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 应该是全天</div>
                <div>可玩度: ⭐⭐⭐⭐⭐</div>
                <div>评价: ？？？</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/99b64b3b1dec468eabacbd66650503ec.png#pic_center" alt="">
                    <img src="https://pic.rmb.bdstatic.com/bjh/news/b1174031480316db4d3de86f737dfe75.jpeg" alt="">
                </div>
            </div>


            <div class="swiper-slide">
                <div>
                    <H3>景点: 武昌江滩</H3>
                </div>
                <div>
                    历史背景:
                    武昌江滩有“梭子景灯”、“纺车雕塑”、“武昌古城门”等景观，令这个用新型材质铺装而成的休闲游园有了文气。“芳草青青树成荫，小径绵绵曲折行，江风阵阵送凉意，隔岸万家灯火明。”汉口江滩重在休闲，武昌江滩重在观景。
                </div>
                <div>类型：</br>
                    一、票价八十到两三百的船票，那个应该是观光船，专门观光两江四岸的。观光船又分两种，一种是普通观光船，就是八十的；一种是两三百的知音号，知音号是民国风的观光船，有表演，也可观江景。这种行程较长，时间较长。</br>二、白天一二元钱，晚上十元钱的，主要航线是中华路到江汉关。这种就是纯粹的过江轮渡，是单纯的市内交通工具，底下一层全是骑电动车过江的市民。这种时间很短，过江约十分钟。推荐这种，便宜实惠，一定要站在船顶上，不要坐在船舱里。吹着江风，看黄鹤楼，看长江大桥，看两岸四地灯光秀
                </div>
                <div>费用: 江边免费 （观光普通轮渡90/ 人, 中华路到江汉关普通过江，白天一二元钱，晚上十元钱的）</div>
                <div>开放时间: 游船晚上6.50 - 9点（必须提前30分钟到场）</div>
                <div>可玩度: ⭐⭐⭐</div>
                <div>评价: 轮渡必去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/214d50384f4a4185b63d23407069c9c2.png#pic_center" alt="">
                    <img src="https://picx.zhimg.com/80/v2-764e507eb0fb219513f0e64674f807db_720w.webp?source=1940ef5c"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 晴川阁</H3>
                </div>
                <div>
                    历史背景:“武汉三大名胜”之一，晴川阁，又名晴川楼，位于湖北省武汉市汉阳区，地处长江北岸龟山东麓的禹功矶上，北临汉水，东濒长江，与黄鹤楼夹江相望，互为衬托；始建于明嘉靖年间，为汉阳知府范之箴在修薛禹稷行宫（禹王庙）时增建，重建于1984年，得名于唐朝诗人崔颢“晴川历历汉阳树，芳草萋萋鹦鹉洲”诗句，有“三楚胜境”之美誉，与黄鹤楼、古琴台并称为“武汉三大名胜”，世称“楚天第一楼”。
                </div>
                <div>费用: 免费（需要预约）</div>
                <div>开放时间: 周二至周日9点到下午5点，4点半停止入场，</div>
                <div>可玩度: ⭐⭐⭐⭐⭐</div>
                <div>评价: 必去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/dbb25da10114488d936943eade8c4ad1.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/f703738da97739128fb97b85f9198618377ae2b3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 古琴台</H3>
                </div>
                <div>
                    历史背景:“武汉三大名胜”之一，古琴台，又名俞伯牙台，为纪念俞伯牙和钟子期“高山流水遇知音”的故事而修建。琴台位于武汉市汉阳区，东与龟山对峙、北临月湖，殿堂前的琴台是汉白玉筑成的，相传为伯牙抚琴处，有“天下知音第一台”之称。
                </div>
                <div>费用: 免费（需要预约）</div>
                <div>开放时间: 暂未开放</div>
                <div>可玩度: ⭐⭐⭐⭐⭐</div>
                <div>评价: ？？</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/dbb25da10114488d936943eade8c4ad1.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/10dfa9ec8a136327578f1bbf9b8fa0ec09fac7d8?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxODA=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 江汉路步行街</H3>
                </div>
                <div>
                    历史背景:江汉路步行街是中国最长的步行街，有“天下第一步行街”的美誉，
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 全天</div>
                <div>可玩度: ⭐⭐⭐⭐⭐</div>
                <div>评价: 必去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/87095270809b41ffb8c76716f1326667.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/b8389b504fc2d56247435cedec1190ef76c66c63?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 武汉美术馆(汉口馆)</H3>
                </div>
                <div>
                    历史背景:武汉美术馆原金城银行旧址于1930年动工，1931年落成。金城银行正立面采用了西洋古典廊柱式样，柱高通达三层，在二层处开有圆形拱窗，使得从柱廊之外看整个建筑立面，既恢宏雄伟又富有一定的变化。1938年日军入侵武汉，强占金城银行大楼为总司令部，直至1945年抗战胜利才被金城银行收回。解放后，1952年金城银行大楼由当时的银行出租给了武汉图书馆，到1957年，在这座建筑里开设了武汉少年儿童图书馆。2003年策划建立武汉美术馆，少儿图书馆才择地迁出。这一座建筑，经过不同的时代，生命的历程也在岁月之中跌宕、起伏、延伸着，看来，优秀历史建筑的保护应该是一个永久的话题。
                </div>
                <div>费用: 免费（需要预约）</div>
                <div>开放时间: 全天</div>
                <div>可玩度: ⭐⭐⭐⭐</div>
                <div>评价: 必去 打卡</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/8ac48fd6ab32445b8aec48d64120e586.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/5d6034a85edf8db1cb13bc049972ca54564e9258de0b?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 吉庆街</H3>
                </div>
                <div>
                    历史背景:吉庆街夜市大排档宽十几米，路面凸凹不平，白天冷冷清清，一到晚上，它的魅力便凸现出来，卖花的卖唱的、拉琴的、吃饭的、服务的……几百个台位挤得满满的，热闹非凡，到午夜12点以后，整个气氛达到高潮。。
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 夜市</div>
                <div>可玩度: ⭐⭐⭐⭐</div>
                <div>评价: 必去(吃吃吃)</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/d948c5e4d93b4a9e8b3c5def11c7c28c.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/aa64034f78f0f73688f0bba50455b319ebc41303?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 黎黄陂路</H3>
                </div>
                <div>
                    历史背景:1861年汉口开埠后，列强纷纷涌入。在黎黄陂路（夷玛街）周边2.46平方公里的区域内，划分了英、法、俄、德、日五国租界，建立了12个外国领事馆、近30家外资金融机构和100多家洋行，汉口呈现了一派带有殖民色彩的畸形繁荣，成为殖民者们乐而忘返的“东方芝加哥”。而位于租界中心的黎黄陂路，则是这段屈辱历史的缩影。
                    如今黎黄陂路街头博物馆包括十七处古建筑，在街头与街尾都立有碑牌标示。
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 全天</div>
                <div>可玩度: ⭐⭐⭐⭐</div>
                <div>评价: 可去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/07818d397da54ffeacd2e81b4b8422c3.png#pic_center" alt="">
                    <img src="https://picx.zhimg.com/80/v2-8e14f2ccb2c27916e06202d986b6df75_720w.webp?source=1940ef5c"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 古德寺</H3>
                </div>
                <div>
                    历史背景:古德寺，位于湖北武汉市汉口黄浦路上滑坡74号，该寺于清光绪三年（1877年）由隆希创建，初名古德茅蓬，1914-1919年间由主持昌宏先后两次进行扩建，改名古德寺，有“心性好古，普度以德”之意，并由黎元洪亲自题写匾名。该寺占地面积近3万平方米，建筑面积近8000平方米。该寺混合了欧亚宗教建筑的特色，融大乘、小乘和藏密三大佛教流派于一身，在汉传佛寺中实属罕见，
                    [1-2] 堪为“佛教胜地一大奇景”“汉传佛寺第一奇观”，具有很高的建筑、文化和历史研究价值。与归元寺、宝通寺、莲溪寺并称为武汉地区四大佛教丛林。 [3-4]
                    古德寺的核心建筑是圆通宝殿，运用了古罗马建筑的结构，内外墙之间的回形步廊和许多方柱，立面墙上的圆窗和长窗，却是基督教堂的建筑样式。
                    其九座佛塔的塔刹，既像风向标又像十字架，在中国塔文化中独树一帜。2012年，古德寺被列入武汉市江岸十大景观，是一座极具特色的禅宗建筑。2013年，古德寺作为近现代重要史迹及代表性建筑被列入全国重点文物保护单位
                </div>
                <div>费用: 免费（需购买香火才能进入寺庙）</div>
                <div>开放时间: 全天</div>
                <div>可玩度: ⭐⭐⭐⭐</div>
                <div>评价: 必去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/c42742d3d8ef41838f7b5fdd99800433.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/3bf33a87e950352a12f193ef5b43fbf2b3118b41?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 汉口江滩</H3>
                </div>
                <div>
                    历史背景:汉口江滩，位于湖北省武汉市江岸区，面积160万平方米，与沿江大道相邻，与武昌黄鹤楼景区相望，与长江百舸争流相映，构成武汉市中心区独具魅力的景观中心，是武汉市著名的风景游览胜地。
                </div>
                <div>费用: 免费</div>
                <div>开放时间: 全天</div>
                <div>可玩度: ⭐⭐⭐</div>
                <div>评价: 可去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/ecd30d2ecc4e451ab4ecb45d91123d71.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9ea15ce00dadd73a1003af33a8715fa?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 湖北美术馆</H3>
                </div>
                <div>
                    历史背景:湖北美术馆2008~2010年藏品统计共981件，藏品来源由艺术家捐赠、奖励性购藏、专题展收藏、征集收藏等，藏品类别有国画、油画、版画、雕塑、书法篆刻、摄影、影像、装置、连环画、漫画、漆画、拓片、玉器、水粉/水彩、陶艺、素描速写、海报/宣传画、民间艺术（剪纸、皮影、服饰、织绣、印染、年画）、综合材料、手稿。
                </div>
                <div>费用: 免费（需要预约）</div>
                <div>开放时间: 周二至周日9点到下午5点，4点半停止入场，</div>
                <div>可玩度: ⭐⭐⭐</div>
                <div>评价: 可去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/8567e9a3b1724531af0912bcc666fdda.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/a686c9177f3e6709c93d6526b496883df8dcd000ff93?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div>
                    <H3>景点: 湖北省博物馆</H3>
                </div>
                <div>历史背景:
                    湖北省博物馆现有馆藏文物26万余件(套)，以青铜器、漆木器、简牍最有特色，其中国家一级文物945件(套)、国宝级文物16件(套)。越王勾践剑、曾侯乙编钟、郧县人头骨化石、元青花四爱图梅瓶为该馆四大镇馆之宝外，曾侯乙尊盘、云梦睡虎地秦简、虎座鸟架鼓、彩绘人物车马出行图、石家河玉人像、崇阳铜鼓等6件文物瑰宝新晋“镇馆之宝”。
                </div>
                <div>费用: 免费（需要预约）</div>
                <div>开放时间: 周二至周日9点到下午5点，4点半停止入场，</div>
                <div>可玩度: ⭐⭐⭐⭐⭐</div>
                <div>评价: 必去</div>
                <div class="img-wrap">
                    <img src="https://img-blog.csdnimg.cn/8567e9a3b1724531af0912bcc666fdda.png#pic_center" alt="">
                    <img src="https://bkimg.cdn.bcebos.com/pic/8694a4c27d1ed21bd338f198a16eddc450da3fde?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5"
                        alt="">
                </div>
            </div>
        </div>
        <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
</body>
<script>
    var mySwiper = new Swiper('.swiper', {
        autoplay: false,//可选选项，自动滑动
        loop: true,
        parallax: true,
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })

    //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
    new Swiper('.swiper')
    var mySwiper = document.querySelector('.swiper').swiper
    mySwiper.slideNext();
</script>
<script>
    const colorConfig = {
        '景点': '#000000',
        '开放时间': 'green',
        '可玩度': '#3498DB',
        '评价': '#D35400',
        '费用': 'red'
    }
    const allNode = document.querySelectorAll('.swiper-slide div')
    allNode.forEach(item => {
        item.style.color = colorConfig[item.innerText.split(':')[0]] || '#9B59B6'
    })
</script>

</html>